<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
   <title>
  		账务统计<s:if test="#request.statisticsType == 0">(应收未收)</s:if><s:else>(应付未付)</s:else>
  	</title>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/cts/css/style.css" type="text/css" />
	<script type="text/javascript" src="${pageContext.request.contextPath}/cts/js/jquery.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/cts/js/common.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/cts/js/jquery.bgiframe.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/cts/js/popdiv.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/cts/js/searchdata.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/cts/js/My97DatePicker/WdatePicker.js"></script>
	
	<style>
		input{border:1px solid #B5BCC2; height: 23px;}
		.main_div{width: 950px; padding: 20px;}
		.unchecked{background:url(${pageContext.request.contextPath}/cts/images/unchecked.png) no-repeat left center; padding-left:18px; width:auto; height:16px; border: 0;
			display:block-inline; color:#3659B7; cursor:pointer;
		}
		.checked{background:url('${pageContext.request.contextPath}/cts/images/checked.png') no-repeat left center; padding-left:18px; width:auto; height:16px; border: 0;
			display:block-inline; color:#3659B7; cursor:pointer;
		}
		.tab4{margin-top: 5px;}
		.tab4 thead th{color: #868686; border-bottom:1px solid #686868; padding: 5px 0 5px 0;text-align: left;padding-left: 6px}
		.tab4 tbody td{color: #686868; font-size:16px; font-weight:bold; border-bottom:1px dashed #686868; padding: 8px 0 8px 0; cursor: pointer;text-align: left;padding-left: 6px}
		.tab4 .last_row td{border-bottom:1px solid #686868;}
		.tab4 .border_none td{border-bottom:none;}
		.tab1 tbody td,.tab1 thead td{font-size:12px; font-weight:normal; border-bottom:1px solid; padding:2px;text-align: center; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
		.tab1{background-color: #F9F1CD;}
		.search_middle{text-align:left; width:950px; background: url('${pageContext.request.contextPath}/cts/images/detail_main_middle_bg.png') repeat-y;}
		.search_top{width:950px; height: 15px; background: url('${pageContext.request.contextPath}/cts/images/detail_main_top_bg.png') no-repeat;}
		.search_bottom{width:950px; height: 15px; background: url('${pageContext.request.contextPath}/cts/images/detail_main_top_bg2.png') bottom no-repeat;}
		.search_main{padding-left: 10px; padding-right: 10px; color: #3659B7;}
		.search_status{text-align: left; color: #3659B7; float: right;}
		.tr_div{width: 675px; padding: 10px; border: 1px solid #b6bcc1; background-color: white; margin-left: 15px;text-align:center;cursor: default;}
		.tr_div .tab1 *{cursor: default; }
		.div_up{background: url('${pageContext.request.contextPath}/cts/images/up.png') no-repeat; width: 35px; height: 21px; 
			position: relative; margin-top: -25px; margin-bottom: 3px;_margin-left: -650px}
	</style>
  </head>
  
  <body class="body_bg">
	<form id="form" autocomplete="off">
		<input type="hidden" id="companyId" name="companyId" value="<s:property value="#request.company.id" />" />
		<input type="hidden" id="statisticsType" name="statisticsType" value="<s:property value="#request.statisticsType" />" />
		<input type="hidden" id="status1" name="status1"/>
	  	<div class="main_div">
	  		<div class="search_middle">
	  			<div class="search_top">&nbsp;</div>
	  			<div class="search_main">
	  			结算方：<input type="text" id="client" name="client" style="width:100px"
						onkeyup="seachDataByKeyword('searchEmployeeBykeyword.action?type=1',this.value,'client','clientId',0,235);"/>
	  				<input type="hidden" id="clientId" name="clientId" />
	  			&nbsp;&nbsp;&nbsp;
	  			订单委托月份：<input type="text" id="months" class="input_date" name="months" style="width:78px" onfocus="WdatePicker({dateFmt:'yyyy-MM'})"/>
	  			&nbsp;&nbsp;&nbsp;
	  			委托至今>：<input type="text" id="days" name="days" style="width:20px"/>天
	  			&nbsp;&nbsp;&nbsp;
	  			团队：<input type="text" id="employee" name="employee" style="width:100px"
						onkeyup="seachDataByKeyword('searchEmployeeBykeyword.action?type=0',this.value,'employee','employeeId',0,235);"/>
	  				<input type="hidden" id="employeeId" name="employeeId" />
	  			&nbsp;&nbsp;&nbsp;
	  			订单标签：<input type="text" id="tag" name="tag" style="width:100px" />
	  			<div style="float: right;">
	  				<a class="a_btn1" href="javascript:search()">筛选</a>
	  				<a class="a_btn1" href="javascript:exportExcel()">导出</a>
	  			</div>
	  			</div>
	  			<div class="search_bottom">&nbsp;</div>
	  		</div>
	  		<div class="search_status" style="float: left; width:950px; margin-top: 5px;">
		  		<div  class="search_status">
		  			<div class="unchecked" onclick="changeStatus(this, 1)">限已归档订单</div>
		  		</div>
	  		</div>
	  		<div style="padding-top: 2px">
	  			<table id="statisticalTab" width="100%" cellpadding="0" cellspacing="0" class="tab4">
	  			</table>
	  			<p id="data_success" style="text-align: center;display: none;">数据显示完毕</p>
	  		</div>
	  	</div>
	</form>
  </body>
	<script>
		$(function(){
			$('.unchecked').each(function(){
				$(this).click(function(){
					changeChecked(this);
				});
			});
			$('input:text').each(function(){
				var div = $("<span class='input_middle'></span>");
				div.append("<span class='input_left'><span class='input_right'></span></span>");
				$(this).after(div);
				div.find('.input_right').append(this);
			})
			search();
		})
		
		function changeStatus(obj,flag){
			$('#status'+flag).val(obj.className != 'checked' ? 5 : '');
			search();
		}
		
		function search(){
			var param = $('#form').serialize();
			var tab = $('#statisticalTab');
			var colspan = tab.find('thead th').length;
			tab.find('tbody').html(
				"<tr class='border_none'><td colspan='"+colspan+"' style='text-align: center'><div>"+
				"<img src='${pageContext.request.contextPath}/cts/images/loading.gif'/></div></td></tr>");
			$('#data_success').hide();
			$.post('cts/statisticsFinancial', param, function(html){
				tab.html(html);
				$('#data_success').show();
			})
		}
		
		function exportExcel(){
			var param = $('#form').serialize();
			window.location.href = "exportStatisticsFinancial?" + param;
		}
		
		function openItems(obj, employeeId){
			var srcClientId = $('#clientId').val();
			$('#clientId').val(employeeId);
			var param = $('#form').serialize();
			$('#clientId').val(srcClientId);
			var className = obj.className;
			$(obj).addClass('border_none');
			var tr = $(obj).next();
			if(tr.find('.tr_div').length > 0){
				if(tr.css('display') == 'none'){
					closeItems();
					tr.show();
				}else{
					closeItems();
				}
				return;
			}
			closeItems();
			var colspan = $(obj).find('td').length;
			tr = $("<tr></tr>").attr('class',className);
			tr.html(
				"<td colspan='"+colspan+"' style='text-align: center'><div class='tr_div'>"+
				"<div class='div_up'>&nbsp;</div>" +
				"<img src='${pageContext.request.contextPath}/cts/images/loading.gif'/></div></td>");
			$(obj).after(tr);
			$.post('cts/statisticsFinancialItems', param, function(html){
				tr.find('.tr_div').html(html);
			})
		}
		function closeItems(){
			$('.tr_div:visible').each(function(){
				var tr = $(this).parents('tr:first');
				tr.prev().removeClass('border_none');
				tr.hide();
			})
		}
	</script>
</html>
